<template>
  <el-table :data="PermissionArr" style="width: 100%;margin-bottom: 20px;" row-key="id" border>
    <el-table-column label="名称" prop="name"></el-table-column>
    <el-table-column label="权限值" prop="code"></el-table-column>
    <el-table-column label="修改时间" prop="updateTime"></el-table-column>
    <el-table-column label="操作">
        <!--row即为已有的菜单对象|按钮对象的数据-->
        <template #="{row,$index}">
           <el-button type="primary" size="small" @click="addPermission(row)" :disabled="row.level==4?true:false">{{row.level==3?'添加功能':'添加菜单'}}</el-button>
           <el-button type="primary" size="small" @click="updatePermission(row)" :disabled="row.level==1?true:false">编辑</el-button>
           <el-popconfirm width="260px" :title="`你确定要删除${row.name}?`" @confirm="removeMenu(row.id)">
            <template #reference>
              <el-button type="primary" size="small" :disabled="row.level==1?true:false">删除</el-button>
            </template>
           </el-popconfirm>
        </template>
    </el-table-column>
  </el-table>
  <!--对话框组件：添加或者修改已有的菜单的数据结构-->
  <el-dialog v-model="dialogTableVisible" :title="menuData.id?'更新菜单':'添加菜单'" width="700px">
    <el-form>
       <el-form-item label="名称">
        <el-input placeholder="请输入菜单名称" v-model="menuData.name"></el-input>
       </el-form-item>
       <el-form-item label="权限">
        <el-input placeholder="请输入权限数值" v-model="menuData.code"></el-input>
       </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogTableVisible=false">取消</el-button>
        <el-button type="primary" @click="save">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {ref,onMounted,reactive} from 'vue';
//引入接口
import {reqRemoveMenu,reqAllPermission,reqAddOrUpdateMenu} from '../../../api/acl/menu/index';
//引入ts类型
import type {MenuParams,Permisstion, PermisstionList,PermisstionResponseData} from '@/api/acl/menu/type';
import { ElMessage } from 'element-plus';
//存储菜单的数据
let PermissionArr=ref<PermisstionList>([])
//控制dialog对话框的显示与隐藏
let dialogTableVisible=ref<boolean>(false)
//添加或者更新菜单需携带的参数
let menuData = reactive<MenuParams>({
    code:'',
    level:0,
    name:'',
    pid:0
})
//组件挂载完毕
onMounted(()=>{
    getHasPermission()
})
//获取菜单数据的方法
const getHasPermission =async()=>{
    let result:PermisstionResponseData=await reqAllPermission();
    if(result.code==200){
        PermissionArr.value=result.data;
    }
}
//添加菜单按钮的回调
const addPermission=(row:Permisstion)=>{
  //清空数据
  Object.assign(menuData,{
    id:0,
    code:'',
    level:0,
    name:'',
    pid:0
  })
    //对话框显示出来
    dialogTableVisible.value=true;
    console.log(row)
    //收集新增的菜单的level数值
    menuData.level=row.level+1;
    //给谁新增子菜单
    menuData.pid = row.id;
}
//编辑按钮的回调
const updatePermission=(row:Permisstion)=>{
  //对话框显示出来
  dialogTableVisible.value=true;
  Object.assign(menuData,row)
}
//确定按钮的回调
const save=async()=>{
  let result:any =await reqAddOrUpdateMenu(menuData)
  if(result.code==200){
    //对话框隐藏
    dialogTableVisible.value=false;
    //提示信息
    ElMessage({type:"success",message:menuData.id?'更新成功':'添加成功'})
    //再次获取数据
    getHasPermission()
  }
}
//删除按钮的回调
const removeMenu=async(id:number)=>{
  let result:any =await reqRemoveMenu(id)
  if(result.code==200){
    ElMessage({type:'success',message:'删除成功'})
    getHasPermission()
  }
}
</script>

<style scoped></style>
